<template>
  <div>
    <div class="container">
      <div class="leftlabel">

      </div>
      <div class="labeltitle">
        追溯链条
      </div>
    </div>
    <div class="container content1">
      <el-steps direction="vertical" :active="6">
        <el-step title="配方颗粒"></el-step>
        <el-step title="配方颗粒 (颗粒)"></el-step>
        <el-step title="浸膏粉"></el-step>
        <el-step title="中药饮片"></el-step>
        <el-step title="中药材"></el-step>
        <el-step title="辅料"></el-step>
      </el-steps>
    </div>
    <div class="container content2">
      <div style="width: 100%;height:150px;position: relative">
        <div style="width: 15%;position: absolute;top: 10px">
            <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
                1
            </div>
            <div style="margin-top: 5px;font-size:16px;">配方颗粒</div>
            <div class="fontcontent">
              <div>名称：{{pfkl.breedName}}</div>
              <div>批次号：{{pfkl.batch}}</div>
              <div>{{ pfkl.time }}</div>
              <div>投入量/生产量：{{pfkl.totalNum}}</div>
            </div>
        </div>
        <img src="../../assets/箭头.png" alt="" style="width: 50px;position: absolute;top: 30%;left: 15%">
        <div style="width: 15%;position: absolute;left: 28%;top: 10px">
          <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
            2
          </div>
          <div style="margin-top: 5px;font-size:16px;">配方颗粒(颗粒)</div>
          <div class="fontcontent">
            <div>名称：{{pfklkl.breedName}}</div>
            <div>批次号：{{pfklkl.batch}}</div>
            <div>{{ pfklkl.time }}</div>
            <div>投入量/生产量：{{pfklkl.totalNum}}</div>
          </div>
        </div>
        <img src="../../assets/箭头.png" alt="" style="width: 50px;position: absolute;top: 30%;left: 45%">
        <div style="width: 15%;position: absolute;left: 58%;top: 10px">
          <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
            3
          </div>
          <div style="margin-top: 5px;font-size:16px;">浸膏粉</div>
          <div class="fontcontent" v-for="(item,index) in jgf" :key="index">
            <div>名称：{{item.breedName}}</div>
            <div>批次号：{{item.batch}}</div>
            <div>{{ item.time }}</div>
            <div>投入量/生产量：{{item.totalNum}}</div>
          </div>
        </div>
      </div>
      <div style="position: relative;height: 150px;">
        <img src="../../assets/箭头.png" style="transform: rotate(90deg);width: 50px; position: absolute; left: 60%;top: 50px" alt="">
      </div>
      <div style="width: 100%;height:auto;position: relative">
        <div style="width: 15%;position: absolute;top: 10px">
          <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
            6
          </div>
          <div style="margin-top: 5px;font-size:16px;">辅料</div>
          <div class="fontcontent" v-for="(item,index) in fl" :key="index">
            <div>名称：{{item.breedName}}</div>
            <div>批次号：{{item.batch}}</div>
            <div>{{ item.time }}</div>
            <div>投入量/生产量：{{item.totalNum}}</div>
          </div>
        </div>
        <img src="../../assets/箭头.png" alt="" style="width: 50px;position: absolute;top: 30%;left: 15%;transform: rotate(180deg)">
        <div style="width: 15%;position: absolute;left: 28%;top: 10px">
          <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
            5
          </div>
          <div style="margin-top: 5px;font-size:16px;">中药材</div>
          <div class="fontcontent" v-for="(item,index) in zyc" :key="index">
            <div>名称：{{item.breedName}}</div>
            <div>批次号：{{item.batch}}</div>
            <div>{{ item.time }}</div>
            <div>投入量/生产量：{{item.totalNum}}</div>
          </div>
        </div>
        <img src="../../assets/箭头.png" alt="" style="width: 50px;position: absolute;top: 30%;left: 45%;transform: rotate(180deg)">
        <div style="width: 15%;position: absolute;left: 58%;top: 10px">
          <div style="width: 30px;height: 30px;border-radius: 50%;background: #409EFF;text-align: center;line-height: 30px;color: #eeeeee">
            4
          </div>
          <div style="margin-top: 5px;font-size:16px;">提取饮片</div>
          <div class="fontcontent" v-for="(item,index) in tuyp" :key="index">
            <div>名称：{{item.breedName}}</div>
            <div>批次号：{{item.batch}}</div>
            <div>{{ item.time }}</div>
            <div>投入量/生产量：{{item.totalNum}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-form>
      <el-form-item class="footerFixed">
<!--        <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>-->
        <el-button @click="backPage">返回</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {hometrace} from '@/request/api'
export default {
  name: "linkdetail",
  data(){
    return{
      id:'',
      pfkl:{},
      pfklkl:{},
      jgf:[],
      tuyp:[],
      zyc:[],
      fl:[]
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.init()
  },
  methods:{
    backPage(){

        this.$router.go(-1);

    },
    init(){
      hometrace(this.id).then((res)=>{
        var list = res.data
        for (let i = 0; i < list.length; i++) {
          if(list[i].sort == "1"){
            this.pfkl = list[i]
          }
          if(list[i].sort == "2"){
            this.pfklkl = list[i]
          }
          if(list[i].sort == "3"){
            this.jgf.push(list[i])
          }
          if(list[i].sort == "4"){
            this.tuyp.push(list[i])
          }
          if(list[i].sort == "5"){
            this.zyc.push(list[i])
          }
          if(list[i].sort == "6"){
            this.fl.push(list[i])
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-step__title{
  font-size: 12px;
}
.fontcontent{
  height: auto;
  div{
    line-height: 20px;
    font-size: 13px;
    color: #7B7B7B;
  }
}
.content2{
  margin-top: 10px;
  margin-left: 10px;
  width: 86%;
  height: 800px;
  display: inline-block;
  vertical-align: middle;
}
.content1{
  margin-top: 10px;
  width: 5%;
  height: 800px;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}
.leftlabel{
  width: 6px;
  height: 20px;
  background: #409EFF;
  display: inline-block;
  vertical-align: middle;
}
.labeltitle{
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}
</style>
